<template>
  <div class="box">
    <div class="main">
      <el-table :data="datatable" style="width: 100%">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="title" label="title" width="260" />
        <el-table-column prop="referenceLocation" label="地震地址" width="180" />
        <el-table-column prop="longitude" label="经度" width="180" />
        <el-table-column prop="latitude" label="纬度" />
        <el-table-column prop="earthquakeTime" label="发震时刻" />
        <el-table-column fixed="right" label="操作" width="280">
          <template #default="scope">
            <el-button @click="handleClickdg(scope.row)" type="text" size="small"
              >单个地震</el-button
            >
            <el-button @click="handleClickbg(scope.row)" type="text" size="small">大屏</el-button>
            <el-button @click="handleClick2d(scope.row)" type="text" size="small">二维</el-button>
            <el-button @click="handleClick3d(scope.row)" type="text" size="small">三维</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { getEarthQuake } from '../api/earthquake'
const router = useRouter()
const datatable = ref([])
getEarthQuake().then((e) => {
  datatable.value = e
})

//地震详情
const earthquakeInfo = ref({
  id: '',
  title: '',
  earthquakeMagnitude: '',
  longitude: '',
  latitude: '',
  depth: '',
  earthquakeTime: ''
})

const handleClickdg = (e) => {
  router.push({
    path: '/gis/onemap',
    query: {
      beforePath: router.currentRoute.value.path,
      data: JSON.stringify({
        id: e.id,
        title: e.title,
        earthquakeMagnitude: e.earthquakeMagnitude,
        longitude: e.longitude,
        latitude: e.latitude,
        depth: e.depth,
        earthquakeTime: e.earthquakeTime
      })
    }
  })
}

const handleClickbg = (e) => {
  router.push({
    path: '/gis/bigscreen',
    query: {
      beforePath: router.currentRoute.value.path,
      data: JSON.stringify({
        id: e.id,
        title: e.title,
        earthquakeMagnitude: e.earthquakeMagnitude,
        longitude: e.longitude,
        latitude: e.latitude,
        depth: e.depth,
        earthquakeTime: e.earthquakeTime
      })
    }
  })
}
const handleClick2d = (e) => {
  console.log(e)

  router.push({
    path: '/gis/gis2d',
       query: {
      beforePath: router.currentRoute.value.path,
      data: JSON.stringify({
        id: e.id,
        title: e.title,
        earthquakeMagnitude: e.earthquakeMagnitude,
        longitude: e.longitude,
        latitude: e.latitude,
        depth: e.depth,
        earthquakeTime: e.earthquakeTime
      })
    }
  })
}
const handleClick3d = (e) => {
  router.push({
    path: '/gis/gis3d',
    query: {
      beforePath: router.currentRoute.value.path,
      data: JSON.stringify({
        id: e.id,
        title: e.title,
        earthquakeMagnitude: e.earthquakeMagnitude,
        longitude: e.longitude,
        latitude: e.latitude,
        depth: e.depth,
        earthquakeTime: e.earthquakeTime
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  width: 100vw;
  display: flex;

  align-items: center;
  justify-content: center;
  .main {
    height: 700px;
    width: 100%;

    color: #fff;
    font-size: 20px;
    overflow: auto;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(94, 105, 105);
      border-bottom: 1px solid #fff;
      width: 100%;
      height: 100px;
    }
  }
}
</style>